<template>
  <div class="header">
    <div class="container">
      <!-- 头部左边 -->
      <div class="header-left">
        <span href="#" style="color:#b0b0b0" @click="toIndex"><em style="color:#00e28b;margin-right:8px;font-weight:700">{{user.username ? user.username : ''}}</em>欢迎来到扶贫产品推广系统！</span><span class="shuxian"></span><span class="shuxian"></span><span class="shuxian"></span>
        <a href="https://github.com/QUAN-1">GitHub</a><span class="shuxian">|</span>
        <a href="https://gitee.com/AUAN-1/poverty-alleviation-mall">项目源代码</a><span class="shuxian">|</span>
        <a href="https://blog.csdn.net/abcquan123">CSDN</a><span class="shuxian">|</span>
        <a href="https://home.cnblogs.com/u/2118298">博客园</a><span class="shuxian">|</span>
        <a href="https://www.jianshu.com/u/49b41ad97f40">简书</a><span class="shuxian">|</span>
        <a href="#" @click="findMe">找我合作</a>
      </div>
      <!-- 头部右边 -->
      <div class="header-right">
        <a href="#" @click="toRegister">注册新账号</a><span class="shuxian">|</span>
        <a href="#" @click="logout">退出</a><span class="shuxian" v-if="user.identity === 'admin'">|</span>
        <a href="#" @click="goAdmin" v-if="user.identity === 'admin'">管理后台</a>
        <div class="cart" style="display:inline-block">
          <a href="#" @click="toCart" class="cart-icon"><em class="iconfont icon-gouwuchekong"></em><span>购物车</span><span>({{goodsSize}})</span></a>
          <!-- 购物车盒子 -->
          <div class="cart-menu">
            <span class="cart-kong" v-if="(cartGoods.length<1)">购物车中还没有商品，赶紧选购吧！</span>
            <div v-else class="cart-goods">
              <div class="cart-item" v-for="(item,index) in cartGoods" :key="index">
                <div class="cart-item-img">
                  <img :src="item.goodsImg" alt="">
                </div>
                <div class="cart-item-name">
                  <span>{{item.goodsname}}</span>
                </div>
                <div class="cart-item-num">
                  <span class="price">{{item.price}}元</span>
                  <span class="el-icon-close">{{item.num}}</span>
                </div>
                <div class="cart-item-close">
                  <span class="el-icon-close" @click="deleteGoods(item)"></span>
                </div>
              </div>
            </div>
            
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      
    }
  },
  computed: {
    user(){
      return this.$store.getters.user
    },
    cartGoods(){
      return this.$store.getters.cartGoods
    },
    goodsSize(){
      let t = 0
      this.$store.getters.cartGoods.map(item=>{
        t+=item.num
      })
      return t
    }
  },
  methods: {
    // 找我合作
    findMe(){
      this.$message.success('加我微信 d2395816280')
    },
    // 退出
    logout(){
      // 清除token
      localStorage.removeItem('tokenKey')
      // 清除vuex
      this.$store.dispatch('clearCurrentState')
      // 清空购物车
      this.$store.dispatch('clearCart','')
      // 清除菜单
      localStorage.removeItem('by_menu')
      // 去登录
      setTimeout(()=>{
        this.$router.push('/login')
      })
    },
    // 这里退出和去后台管理还有去注册有bug,在刷新页面的情况下,得点击两次(这里用setTimeout解决了，但是具体原因未知)----(2021-04-07-0:03极大可能因为a标签的href默认#的原因)
    // 去后台管理
    goAdmin(){
      setTimeout(()=>{
        this.$router.push(localStorage.getItem('by_menu'))
      })
    },
    // 去注册
    toRegister(){
      setTimeout(()=>{
        this.$router.push('/register')
      })
    },
    // 去购物车
    toCart(){
      setTimeout(()=>{
        this.$router.push('/common/cart')
      })
    },
    // 删除商品
    deleteGoods(item){
      let temp = JSON.parse(JSON.stringify(item))
      this.$store.dispatch('clearCart',temp)
    },
    // 去首页
    toIndex(){
      this.$router.push('/common/index')
    }
  },
  created() {
    
  },
  mounted() {
    // console.log(this.user)
  },
}
</script>
<style lang="less" scoped>
.header{
  width: 100%;
  height: 39px;
  background-color: #333;
  .container{
    width: 1200px;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    // 链接
    a{
      text-align: center;
      color: #b0b0b0;
      &:hover{
        color: #fff;
      }
    }
    // 竖线
    .shuxian{
      margin: 7px;
      color: #424242;
    }
    .header-left{
      height: 39px;
      float: left;
      line-height: 39px;
    }
    .header-right{
      height: 39px;
      float: right;
      line-height: 39px;
      // 右边的购物车
      .cart{
        position: relative;
        height: 39px;
        width: 120px;
        margin-left: 15px;
        text-align: center;
        background-color: #424242;
        .icon-gouwuchekong{
          margin-right: 5px;
        }
        &:hover{
          background-color: #fff;
          .cart-menu{
            height: 300px;
            box-shadow: 0px 7px 10px rgba(0,0,0,.15);
          }
          a{
            color: #00e28b;
          }
        }
        .cart-menu{
          position: absolute;
          top: 39px;
          left: -180px;
          height: 0px;
          width: 300px;
          box-sizing: border-box;
          overflow-y: scroll;
          transition: all ease .3s;
          z-index: 999;
          background-color: #fff;
          .cart-kong{
            display: inline-block;
            width: 100%;
            height: 300px;
            line-height: 300px;
          }
          .cart-goods{
            padding: 0px 20px;
            .cart-item{
              display: flex;
              width: 100%;
              height: 80px;
              line-height: 80px;
              text-align: left;
              border-bottom: 1px solid #ededed;
              &:last-child{
                border-bottom: 0px solid #ededed;
              }
              &:hover{
                .cart-item-close{
                  /deep/ .el-icon-close{
                    opacity: 1;
                  }
                }
              }
              .cart-item-img{
                width: 39px;
                height: 39px;
                margin-right: 10px;
                img{
                  vertical-align: middle;
                  width: 100%;
                  height: 100%;
                }
              }
              .cart-item-name{
                width: 100px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              .cart-item-num{
                margin: 0px 10px;
                width: 90px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                .price{
                  color: #ff442f;
                }
              }
              .cart-item-close{
                /deep/ .el-icon-close{
                  width: 14px;
                  height: 14px;
                  border-radius: 50%;
                  background-color: #00e28b;
                  color: #fff;
                  opacity: 0;
                  transition: all ease .3s;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>